<template>
    <div class="app-container">
        <!-- Statistic 统计数值 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-statistic group-separator=","  :value="summary.carNum" title="车辆数"></el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic title="司机数">
                        <template slot="formatter">
                            {{summary.driverNum}}
                        </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic group-separator=","  decimal-separator="." :value="summary.orderCount" title="订单数">
                        <template slot="prefix">
                            <i class="el-icon-s-flag" style="color: red"></i>
                        </template>
                        <template slot="suffix">
                            <i class="el-icon-s-flag" style="color: blue"></i>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-statistic :value="summary.basePrice" title="起步价" :precision="2">
                        <template slot="suffix">
                            <span @click="like = !like" class="like">
                                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                                <i class="el-icon-star-off" v-show="!like"></i>
                            </span>
                        </template>
                    </el-statistic>
                </div>
            </el-col>
        </el-row>

        <line-chart :list="areaSummarList" chartId="chart1" title='地区分类展示叫车数量'></line-chart>

        

        <div class="info">
            <!-- detail -->
            <el-descriptions class="margin-top" title="平台基本信息" :column="4" direction="vertical" border>
                <el-descriptions-item label="平台名">{{ data.platformName }}</el-descriptions-item>
                <el-descriptions-item label="注册资本" :span="2">{{ data.registeredCapital }}</el-descriptions-item>
                <el-descriptions-item label="成立日期">{{ data.establishmentDate }}</el-descriptions-item>
                <el-descriptions-item label="地区">
                    <el-tag size="small">{{ data.area }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="描述"  :span="2">{{ data.description }}</el-descriptions-item>
            </el-descriptions>
        </div>

        <div class="info">
            <!-- detail -->
            <el-descriptions class="margin-top" title="平台运维信息" :column="4" direction="vertical" border>
                <el-descriptions-item label="订单数量">{{ data.platformOperation.orderCount }}</el-descriptions-item>
                <el-descriptions-item label="单次平均叫车里程">{{ data.platformOperation.averageTripDistance }}</el-descriptions-item>
                <el-descriptions-item label="乘客评价">{{ data.platformOperation.passengerRating }}</el-descriptions-item>
                <el-descriptions-item label="订单完成率">{{ data.platformOperation.completionRate }}</el-descriptions-item>
                <el-descriptions-item label="平均等待时间">{{ data.platformOperation.averageWaitingTime }}</el-descriptions-item>
                <el-descriptions-item label="平均乘车费用">{{ data.platformOperation.averageFare }}</el-descriptions-item>
                <el-descriptions-item label="投诉率">{{ data.platformOperation.complaintRate }}</el-descriptions-item>
                <el-descriptions-item label="司机评分">{{ data.platformOperation.driverRating }}</el-descriptions-item>
                <el-descriptions-item label="高峰时段叫车数量">{{ data.platformOperation.peakHourOrderCount}}</el-descriptions-item>
                <el-descriptions-item label="夜间叫车数量">{{ data.platformOperation.nighttimeOrderCount }}</el-descriptions-item>
            </el-descriptions>
        </div>


    </div>
</template>
  
<script>
import { detail, summary,areaSummary } from "@/api/platform";
import LineChart from '../home/components/line-chart.vue';
export default {
    name: "PlatformDetail",
    // 组件
    components: {
        LineChart,
    },
    // 数据
    data() {
        return {
            // 遮罩层
            loading: true,
            // id
            id: -1,
            // 详情
            data: {},
            // 头部汇总
            summary:{},
            // 地区汇总
            areaSummarList:[],
            // static
            like: true,

            // detail

        };
    },
    // 监听
    watch: {},

    // created 钩子函数在组件实例被创建后立即执行，适合进行一些数据的初始化和简单的异步操作
    created() {

    },
    // mounted 钩子函数在组件实例被挂载到 DOM 上后执行，适合进行依赖于 DOM 的操作。比如获取 DOM 元素的尺寸、绑定事件监听器等
    mounted() {
        this.id = this.$route.params.id;
        this.getData(this.id);
    },
    // 函数方法
    methods: {
        /** 查询详情 */
        getData(id) {
            this.loading = true;
            detail(id).then(res => {
                if (res.success) {
                    this.data = res.data
                }
            })
            summary(id).then(res => {
                if (res.success) {
                    this.summary = res.data
                }
            })
            areaSummary(id).then(res => {
                if (res.success) {
                    this.areaSummarList = res.data
                }
            })
        },


    },
};
</script>
  
<style scoped lang="scss">
.app-container{
    overflow-y: scroll;
}
.info {
    margin:40px 20px;
    padding: 10px;
}
</style>
  